@import 'common/config.less';
@import 'common/normalize.less';
@import 'common/common.less';

.page {
    &-section {
        height: 100%;
        color: #fff;
    }

    &-content {
        position: relative;
        height: 100%;
        padding-bottom: rem(30);

        .fp-tableCell {
            height: 100%;
        }

        &-1 {

            .page-logo {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                .logo {
                    width: rem(195);
                    height: rem(45);
                    margin: 0 auto rem(15);
                    background: url('../images/c1-logo.png') center no-repeat;
                    background-size: cover;
                }

                h2 {
                    font-size: 0;
                    width: rem(411);
                    margin: 0 auto;
                    text-align: center;
                    font-size: rem(40);
                    font-weight: normal;
                }
            }
        }

        &-2 {
            .fp-tableCell {
                display: flex;
                flex-direction: column;
                padding-bottom: rem(30);
            }
            .page-boxes {
                flex: 1;
            }
        }

        &-12 {
            .page-logo {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .logo {
                width: rem(469*0.5);
                height: rem(321*0.5);
                background: url('../images/c12-logo.png') center no-repeat;
                background-size: cover;
                margin: 0 auto;
            }

            .desc {
                width: rem(750);
                height: rem(48);
                background: url('../images/c12-desc.png') center no-repeat;
                background-size: contain;
                margin: rem(15*3) auto;
            }

            .code {
                width: rem(70*3);
                height: rem(70*3);
                background: #fff url('../images/c12-ewcode.png') center no-repeat;
                background-size: cover;
                margin: 0 auto;
                border: rem(10) solid #fff;
            }
        }
    }

    &-title {
        font-size: rem(36);
        padding: rem(40) 0;
        margin: 0;
        text-align: center;
        font-weight: normal;
        color: #fff;
    }

    &-boxes {
        background: #fff;
        border-radius: rem(16);
        width: rem(690);
        margin: 0 auto;
        padding: rem(36);
    }

    &-next,
    &-submit {
        width: rem(690);
        margin: rem(30) auto 0;
        height: rem(80);
        line-height: rem(80);
        border-radius: rem(16);
        background: #fff;
        color: #3086ed;
        text-align: center;
        font-size: rem(32);
    }

    &-form-item {
        margin-bottom: rem(30);

        label {
            display: block;
            font-size: rem(28);
            color: #3086ed;
            padding-bottom: rem(20);
        }

        .page-form-control {
            min-height: rem(70);
            border: 1px solid #ccc;

            input[type="text"] {
                width: 100%;
                height: 100%;
                border: 0;
                font-size: rem(28);
                color: #434343;
                padding-left: rem(30);
                outline: none;
            }

            textarea {
                width: 100%;
                height: rem(300);
                border: 0;
                font-size: rem(28);
                color: #434343;
                padding-left: rem(30);
                outline: none;
            }

            & > span {
                display: inline-block;
                vertical-align: middle;
                margin: rem(5) 0 0 rem(15);
                width: rem(48);
                height: rem(48);
                background: url('../images/s.png') center no-repeat;
                background-size: cover;

                &.active {
                    background: url('../images/si.png') center no-repeat;
                    background-size: cover;
                }
            }
        }

        .page-form-check {
            ul {
                padding-top: rem(20);
            }
            li {
                color: #656565;
                margin-bottom: rem(40);
                font-size: rem(28);
            }

            span {
                padding-right: rem(60);
            }

            span ,
            input[type="checkbox"] {
                display: inline-block;
                vertical-align: middle;
            }

            input[type="checkbox"] {
                -webkit-appearance: none;
                border: 1px solid #ccc;
                width: rem(32);
                height: rem(32);
                transition: all .3s;
                outline: none;

                &:checked {
                    background: url('../images/yes.png') center no-repeat;
                    background-size: cover;
                    border-color: #fff;
                }
            }
        }
    }
}